<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-10-31 16:21
  PageName：d_practice4_RankList.html
  Function：实战案例 - 设计排行榜
  URL：http://localhost:8080/h_list/h4_practice/d_practice4_RankList.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 设计排行榜</title>

    <style type="text/css">
        .music_sort {
            width: 200px;
            border: 1px solid #E8E8E8;
        }

        .music_sort * {
            margin: 0;
            padding: 0;
            font: normal 12px/22px "宋体", Verdana, Lucida, Arial, Helvetica, sans-serif;
        }

        /* 清除.music_sort容器中所有元素的默认内补丁和外补丁，并设置文字相关属性 */
        .music_sort h1 {
            height: 24px;
            text-indent: 10px; /* 标题文字缩进，增加空间感 */
            font-weight: bold;
            color: #FFFFFF;
            background-color: #999999;
        }

        .music_sort ol {
            height: 220px;       /* 固定榜单列表的整体高度 */
            padding-left: 26px;  /* 利用内补丁增加ol容器的空间显示背景图片 */
            list-style: none;    /* 去除默认的列表修饰符 */
            background: url(images/number.gif) no-repeat 0 0;
        }

        .music_sort li {
            width: 100%;
            height: 22px;
            list-style: none; /* 去除默认的列表修饰符 */
        }

        .music_sort li span {
            color: #CCCCCC; /* 将列表中的歌手名字设置为灰色 */
        }
    </style>
</head>

<body>
<div class="music_sort">
    <h1>音乐排行榜</h1>
    <div class="content">
        <ol>
            <li><strong>浪人情歌</strong><span>伍佰</span></li>
            <li><strong>K歌之王</strong><span>陈奕迅</span></li>
            <li><strong>心如刀割</strong><span>张学友</span></li>
            <li><strong>零（战神 主题曲）</strong><span>柯有伦</span></li>
            <li><strong>双子星</strong><span>光良</span></li>
            <li><strong>离歌</strong><span>信乐团</span></li>
            <li><strong>海阔天空</strong><span>信乐团</span></li>
            <li><strong>天高地厚</strong><span>信乐团</span></li>
            <li><strong>边走边爱</strong><span>谢霆锋</span></li>
            <li><strong>想到和做到的</strong><span>马天宇</span></li>
        </ol>
    </div>
</div>
</body>
</html>